<template>
  <el-dialog
    :visible.sync="$attrs.visable"
    width="1000px"
    :before-close="handleClose"
    append-to-body
    title="通讯录发起聊天"
    :close-on-click-modal="false"
    class="dialog_nopadd"
  >
    <div class="flex bookbox">
      <!-- 左侧企微号 -->
      <div class="book_left">
        <div class="searchbox flexcenter">
          <el-input
            placeholder="搜索企微号"
            v-model="queryParams.keyword"
            class="inputsearch"
            size="small"
            style="width: 220px"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div class="listbody">
          <div
            v-for="(item, index) in userlist"
            :key="index"
            class="listitem p-5 commhover"
            :class="userItem&&userItem.id === item.id?'active':''"
            @click="handleUser(item)"
          >
            <div class="flex w_full">
              <div class="avatarbox mr-12">
                <img :src="item.avatar" class="w_full h_full" />
              </div>
              <div class="namebox">
                <div class="w_full c_text2 textover pr-10">{{ item.name }}</div>
                <div class="w_full textover c_f90 f-12">{{ item.biaoz }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="book_right p-16">
        <div class="flexbetween mb-16">
          <el-radio-group
            v-model="queryParams.type"
            size="small"
            class="plainradiobtn"
          >
            <el-radio-button :label="1" class="f-14">最近聊天</el-radio-button>
            <el-radio-button :label="2" class="f-14">好友</el-radio-button>
            <el-radio-button :label="3" class="f-14">群聊</el-radio-button>
            <el-radio-button :label="4" class="f-14">企业成员</el-radio-button>
          </el-radio-group>
          <el-input
            placeholder="昵称、备注、姓名、手机号、群名称"
            v-model="queryParams.keyword"
            class="inputsearch"
            size="small"
            style="width: 230px"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>

        <div class="txlcontent y_over">
          <div
            v-for="(item, index) in userList"
            :key="index"
            class="useritem flexbetween p-12 commhover"
            :class="{ no_bordertop: index !== 0 }"
          >
            <div class="flexbetween userleft">
              <img
                src="//wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
                alt=""
                class="useravatar mr-12"
              />
              <div class="titlebox flex pl-10">
                <div class="usertitle textover">群聊</div>
                <div class="f-12 c_666">（12）</div>
              </div>
              <div class="groupmaster f-12 flexcenter">群主</div>
            </div>
            <div class="pl-12">
              <i class="el-icon-arrow-right f-16"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      userlist: [
        {
          name: "Gardenia1",
          id: 1,
          avatar:
            "https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0",
          biaoz: "@志新",
        },
        {
          name: "Gardenia2",
          id: 2,
          avatar:
            "https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0",
          biaoz: "@志新",
        },
        {
          name: "Gardenia3",
          id: 3,
          avatar:
            "https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0",
          biaoz: "@志新",
        },
        {
          name: "Gardenia4",
          id: 4,
          avatar:
            "https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0",
          biaoz: "@志新",
        },
        {
          name: "Gardenia5",
          id: 5,
          avatar:
            "https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0",
          biaoz: "@志新",
        }
      ],
      userItem:null,
      queryParams: {
        type: 1,
        keyword: "",
      },
      userList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    };
  },
  methods: {
    handleClose() {
      this.$emit("close"); //关闭弹窗;
    },

    handleUser(user){
      this.userItem = user
    },

    handleAddLable() {
      if (this.form.name) {
        if (this.form.labels.includes(this.form.name)) {
          this.$message.warning("标签重复");
          return;
        }
        this.form.labels.push(this.form.name);
        this.form.name = "";
      }
    },

    removeLable(index) {
      this.form.labels.splice(index, 1);
    },

    handleSubmit() {},
  },
};
</script>
<style lang="scss" scoped>
.bookbox {
  width: 100%;
  height: 600px;
}
.book_left {
  width: 250px;
  height: 100%;
  padding: 10px 0;
  box-shadow: 1px 0 0 0 #e9e9e9;
}
.listbody {
  height: calc(100% - 40px);
  margin-top: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 12px;
}
.avatarbox {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
}
.namebox {
  width: calc(100% - 52px);
  line-height: 1.6;
}
.listitem{
  margin: 4px 0;
  &.active{
    background-color: #eff3ff;
  }
}
.book_right {
  width: calc(100% - 250px);
  height: 100%;
}
.labelbox {
  border: 1px solid rgb(240, 240, 240);
  padding: 8px;
}
.labelitem {
  display: inline-block;
  border: 1px solid #d9d9d9;
  background-color: #f5f5f5;
  padding: 4px 13px;
  line-height: 22px;
}
.txlcontent {
  height: 520px;
}
.useritem {
  border: 1px solid #e9e9e9;
}
.userleft {
  width: calc(100% - 30px);
}
.titlebox {
  width: calc(100% - 100px);
}
.usertitle {
  // width: calc(100% - );
  max-width: 80%;
}
.groupmaster {
  width: 45px;
  height: 24px;
  background: #f0f5ff;
  border-radius: 2px;
  border: 1px solid #adc6ff;
  color: #2f54eb;
}
.no_bordertop {
  border-top: none;
}
</style>